<template>
  <div class="dashboard-container" v-loading="loading">
    <el-card class="box-card">
      <treeTool :treeNode="company" @addDept="doAdd" :isRoot="true" />
      <el-divider></el-divider>
      <el-tree
        :data="data"
        :props="defaultProps"
        node-key="id"
        default-expand-all
        :expand-on-click-nodef="false"
      >
        <!-- 把data传递给这个组件里的treeNode -->
        <treeTool
          slot-scope="{ data }"
          @delDets="getGepartment"
          @addDept="doAdd"
          @editDept="doEdit"
          :treeNode="data"
        />
      </el-tree>
      <addDepts
        :pid="currentId"
        :showDialog.sync="showDialog"
        @ADD="getGepartment"
        ref="addDepts"
      />
    </el-card>
  </div>
</template>

<script>
import treeTool from './components/treeTool.vue'
import { getGepartment } from '@/api/department'
import { transToTreeData } from '@/utils'
import addDepts from './components/add-Depts.vue'
export default {
  async created () {
    this.getGepartment()
  },
  methods: {
    async getGepartment () {
      this.loading = true
      let res = await getGepartment()
      // console.log(res)
      this.company.name = res.data.companyName
      let list = res.data.depts
      this.data = transToTreeData(list, '')
      this.loading = false
    },
    doAdd (id) {
      this.showDialog = true
      this.currentId = id
    },
    // 点击了查看部门触发
    async doEdit (id) {
      // 调用子组件里获取详情的方法
      await this.$refs.addDepts.getDetail(id)

      // 打开窗口
      this.showDialog = true
    }
  },
  components: {
    treeTool,
    addDepts
  },
  data () {
    return {
      loading: false,
      showDialog: false,
      currentId: '',
      company: {
        name: '雷氏国际联合财团',
        manager: '负责人',
        id: ''
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      data: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  .box-card {
    padding: 30px 140px;
  }
}
</style>
